<!DOCTYPE html>
<html>
	<head>
		<title></title>
		<meta charset="UTF-8"/>
		<script type="text/javascript" src="lib/jquery-2.1.0.min.js"></script>
		<link type="text/css" rel="stylesheet" href="css/umlCanvas.css"/>
		<style>
			.folder div span{
				display:none!important;
			}
		</style>
	</head>
	<body>
		<div id="canvas1">
			<!-- 以下内容在多个画布的情况下不能共用，一个画布必须有一个备份 -->
			<!-- 缩放 -->
			<select onchange="zoom(this)">
				<option value="0.5">50%</option>
				<option value="1">100%</option>
				<option value="1.5">150%</option>
				<option value="2">200%</option>
				<option value="2.5">250%</option>
				<option value="3">300%</option>
			</select>
			<div class="tools folder" >
				<div style="background:url('images/icons/swich.png') no-repeat left center;" class="swich_tool_view" title="切换工具栏视图"></div>
				<div class="cursor cursor"></div>
				<hr/>
				<div class="node entity"><span>实体</span></div>
				<div class="node interface"><span>接口</span></div>
				<div class="node enum"><span>枚举</span></div>
				<hr/>
				<div class="component property"><span>属性</span></div>
				<div class="component enumItem"><span>枚举项</span></div>
				<div class="component action"><span>行为</span></div>
				<hr/>
				<div class="line extends"><span>继承</span></div>
				<div class="line implement"><span>实现</span></div>
				<div class="line aggregate"><span>聚合</span></div>
				<div class="line compose"><span>组合</span></div>
				<div class="line associate"><span>关联</span></div>
			</div>
			<div class="canvas_freamwork">
				<div class="uml_canvas">
					<!-- 线条画布 -->
					<svg class="svg_canvas">
						<g class="uml_lines"></g>
					</svg>
					<!-- 节点画布 -->
				</div>
			</div>

			<datalist id="property_type_tip">
				<option value="String"></option>
				<option value="Set"></option>
				<option value="List"></option>
				<option value="Date"></option>
				<option value="Long"></option>
				<option value="Integer"></option>
				<option value="oschinaAoscgitAinline"></option>
			</datalist>
		</div>

		<!-- 以下内在多个画板时的情况下可以共用 ，包括图形的模板、右键菜单等元素-->
		<!-- uml元素模板 -->
		<svg>
			<defs>
				<!-- 空心三角形 -->
				<marker id="arrow1" markerWidth="100" markerHeight="100" refx="16" refy="13" orient="auto">
					<path d="M10,10 L16,13 L10,16 z" style="fill:#CCFFCC;stroke-dasharray:0;stroke-width:1;"></path>
				</marker>
			    <!-- 空心菱形 -->
			  	<marker id="arrow2" markerWidth="100" markerHeight="100" refx="10" refy="13" orient="auto">
			    	<path d="M10,13 L16,10 L22,13 L16,16 L10,13 z" style="fill:#CCFFCC;stroke-dasharray:0;stroke-width:1;"></path>
			    </marker>
			    <!-- 实心菱形 -->
			    <marker id="arrow3" markerWidth="100" markerHeight="100" refx="10" refy="13" orient="auto">
			    	<path d="M10,13 L16,10 L22,13 L16,16 L10,13 z" style="fill:#5890c1;stroke-dasharray:0;stroke-width:1;"></path>
			    </marker>
			</defs>
		</svg>
		<div id="template">
			<!-- 线条模板 -->
			<svg id="line-template" style="">
				<!-- 继承关系连线模板 -->
				<g class="line extends">
					<path d="M10,20 L80,20" style="marker-end:url(#arrow1)"></path>
				</g>
				<!-- 实现关系连线模板 -->
				<g class="line implement">
					<path d="M10,70 L80,70" style="marker-end:url(#arrow1);stroke-dasharray:5"></path>
				</g>
				<!-- 聚合关系连线模板 -->
				<g class="line aggregate">
					<path d="M0,0 L0,0" style="marker-start:url(#arrow2)"></path>
					<text x="20" y="30">说明文字</text>
					<text x="30" y="40"></text>
				</g>
				<!-- 组合关系连线模板  -->
				<g class="line compose">
					<path d="M0,0 L0,0" style="marker-start:url(#arrow3)"></path>
					<text x="20" y="30">说明文字</text>
					<text x="30" y="40"></text>
				</g>
				<!-- 关联关系连线模板  -->
				<g class="line associate">
					<path d="M0,0 L0,0"></path>
					<text x="20" y="30">说明文字</text>
					<text x="30" y="40"></text>
				</g>
			</svg>
			
			<!-- 节点模板 -->
			<div id="node-template">
				<!-- 实体模板 -->
				<div class="node entity">
					<div class="name">User</div>
					<div class="properties"></div>
					<div class="actions"></div>
				</div>
				
				<!-- 接口模板 -->
				<div class="node interface">
					<div class="header">«interface»</div>
					<div class="name">接口</div>
					<div class="actions"></div>	
				</div>
				
				<!-- 枚举模板  -->
				<div class="node enum">
					<div class="header">«enum»</div>
					<div class="name">enum</div>
					<div class="enumItems"></div>
				</div>
				
				<!-- 属性模板  -->
				<div class="property">
					<div class="propertyName">emails</div><div>:</div>
					<div class="propertyType">Set</div>
				</div>
				
				<!-- 枚举项模板 -->
				<div class="enumItem">enumitem</div>
				
				<!-- 行为模板 -->
				<div class="action">
					<div class="actionName">assignPost</div>
					<div class="returnType">void</div>
				</div>
				
				<!-- 行为的参数模板 -->				
				<div class="parameter" sortNumber="1">
					<div class="parameterType">Post</div>
					<div class="parameterName">post</div>
				</div>
			</div>
			
			<div id="edit_windows">
				<div id="edit_entity_window">
					
				</div>
			</div>
		</div>
		
		<!-- 各种右键编辑菜单 -->
		<div id="edit_contextmenus">
			<!-- 添加节点成员的右键菜单 -->
			<div id="add_members" class="contextmenu">
				<div class="contextmenu_item add_property"><div>添加属性</div></div>
				<div class="contextmenu_item add_action"><div>添加行为</div></div>
				<div class="contextmenu_item add_enumItem"><div>添加枚举项</div></div>
			</div>
			
			<!--  -->
			<div id="">
			</div>
		</div>
		
		<script type="text/javascript" src="js/jqueryUmlCanvas.js"></script>
		<script type="text/javascript" src="js/tool.js"></script>
		<script type="text/javascript" src="plugins/inlineedit/jquery.miniedit.js"></script>
		<script type="text/javascript">
			$("#canvas1").umlCanvas();
			
			function zoom(t){
				var value = $(t).val();
				$(".uml_canvas").css("transform","scale("+value+")");
			}
			$(".tools .swich_tool_view").click(function(){
				var thiz = $(this);
				if($(this).data("closed")){
					thiz.data("closed",false);
					thiz.parent().addClass("folder");
				} else {
					thiz.data("closed",true);
					thiz.parent().removeClass("folder");
				}
			});	
		</script>
	</body>
</html>